<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热力图</title>
    <link rel="stylesheet" href="heatpicture.css">
    <script src="echarts.min.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>无人机检出热力图</h1>
        </header>
        
        <div class="controls">
            <div class="websocket-controls">
                <div class="connection-inputs">
                    <input type="text" id="wsIp" placeholder="IP地址" value="192.168.5.10" class="input-field">
                    <input type="number" id="wsPort" placeholder="端口" value="1234" class="input-field">
                    <button id="connectBtn" class="btn btn-primary">连接</button>
                    <button id="disconnectBtn" class="btn btn-secondary" disabled>断开</button>
                    <span id="connectionStatus" class="status-disconnected">未连接</span>
                    <button id="clearData" class="btn">清空数据</button>
                    <button id="getUavLibBtn" class="btn btn-info">获取无人机库</button>
                    <button id="startAutoUpdateBtn" class="btn btn-success">启动定时更新</button>
                    <button id="stopAutoUpdateBtn" class="btn btn-danger">停止定时更新</button>
                    <input type="number" id="updateIntervalInput" placeholder="更新间隔(秒)" value="5" min="1" max="60" class="input-field">
                    <button id="setIntervalBtn" class="btn btn-secondary">设置间隔</button>
                    <button id="fullBandScanBtn" class="btn btn-warning">全频段扫描无人机</button>
                </div>
            </div>
            
            <div class="data-controls">

                

            </div>
        </div>
        
                <div class="chart-container">
            <div id="heatmap" class="heatmap-chart"></div>
        </div>
        
        <div class="chart-container">
            <div id="heatmap2" class="heatmap-chart"></div>
        </div>
        </div>
        
        <!-- 检出统计表格 -->
        <div class="detection-table-container">
            <h3>检出统计表</h3>
            <div class="table-wrapper">
                <table id="detectionTable" class="detection-table">
                    <thead>
                        <tr>
                            <th>无人机名称</th>
                            <th>频点 (MHz)</th>
                            <th>检出次数</th>
                            <th>平均相似度</th>
                        </tr>
                    </thead>
                    <tbody id="detectionTableBody">
                        <!-- 数据将通过JavaScript动态填充 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <script src="heatpicture.js"></script>
</body>
</html>